<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>系统资源列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="${site.logo}">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/css/user.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1041315_oj8p2fziz6r.css">
</head>
<body class="childrenBody">
<fieldset class="layui-elem-field">
    <legend>资源检索</legend>
    <div class="layui-field-box">
        <form class="layui-form">
            <div class="layui-inline" style="margin-left: 15px">
                <label>资源来源:</label>
                <div class="layui-input-inline">
                    <select name="s_source">
                        <option value="">请选择资源来源</option>
                        <option th:each="dict:${dictList}" th:text="${dict.value}"></option>
                    </select>
                </div>
            </div>
            <div class="layui-inline" style="margin-left: 15px">
                <label>资源类型:</label>
                <div class="layui-input-inline">
                    <input type="text" value="" name="s_type" placeholder="请输入类型(.jpg/.png)"
                           class="layui-input search_input">
                </div>
            </div>
            <div class="layui-inline" style="margin-left: 15px">
                <label>hash值:</label>
                <div class="layui-input-inline">
                    <input type="text" value="" name="s_hash" placeholder="请输入hash值" class="layui-input search_input">
                </div>
            </div>
            <div class="layui-inline">
                <a class="layui-btn" lay-submit="" lay-filter="searchForm"><i class="iconfont icon-sousuo2"></i>查询</a>
            </div>
            <div class="layui-inline">
                <button type="reset" class="layui-btn layui-btn-primary"><i class="iconfont icon-zhongzhi"></i>重置</button>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-danger" data-type="deleteSome"><i class="iconfont icon-shanchu"></i>批量删除</a>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-normal addResource_btn"><i class="iconfont icon-xinzeng"></i>添加</a>
            </div>
        </form>
    </div>
</fieldset>
<div class="layui-form users_list">
    <table class="layui-table" id="test" lay-filter="demo"></table>

    <script type="text/html" id="webUrl">
        {{# if(d.fileType.indexOf("gif")>=0 || d.fileType.indexOf("jpg")>=0  || d.fileType.indexOf("png")>=0 ){ }}
        <span class="layer-photos-demo" id="pic_{{d.id}}"><img src="{{ d.webUrl }}" layer-src="{{ d.webUrl }}"
                                                               style="width: 40px" lay-event="showPic"></span>
        {{# }else{ }}
        <span>{{ d.webUrl }}</span>
        {{# } }}
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="iconfont icon-shanchu"></i>删除</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="preview"><i class="iconfont icon-tubiao-06"></i>预览</a>
    </script>
</div>
<div id="page"></div>
<div id='jsonContainer' class="Canvas" style="display: none"></div>
<script>
    var baseDir = '${base}';
</script>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/js/tools.js"></script>
<script type="text/javascript" src="/js/layui_ext/soulTable/soulTable.js"></script>
<script type="text/javascript" th:inline="none">
    layui.config({
        base: "/js/common/"
    }).use(['layer', 'form', 'laypage', 'table', 'common','soulTable'], function () {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form,
            laypage = layui.laypage,
            common = layui.common,
            table = layui.table,
            soulTable=layui.soulTable,
            t;                  //表格数据变量

        t = {
            elem: '#test',
            url: 'list',
            method: 'post',
            id: 'testReload',
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                groups: 2, //只显示 1 个连续页码
                first: "首页", //显示首页
                last: "尾页", //显示尾页
                limits: [3, 10, 20, 30]
            },
            autoColumnWidth:{
                init:true
            },
            width: $(parent.window).width() - 223,
            cols: [[
                {type: 'checkbox'},
                {field: 'fileName', title: '文件名称'},
                {field: 'source', title: '来源'},
                {field: 'webUrl', title: '地址', templet: '#webUrl'},
                {field: 'hash', title: 'hash值'},
                {field: 'fileSize', title: '文件大小'},
                {field: 'fileType', title: '文件类型'},
                {field: 'categoryName', title: '分类'},
                {
                    field: 'createDate',
                    title: '创建时间',
                    templet: '<div>{{ layui.laytpl.toDateString(d.createDate) }}</div>',
                    unresize: true
                }, //单元格内容水平居中
                {fixed: 'right', title: '操作', width: '15%', align: 'center', toolbar: '#barDemo'}
            ]],
            done: function (res, curr, count) {
                //pages=res.page;
                counts = res.count;
                //完整功能
                laypage.render({
                    elem: 'page'
                    , count: counts,
                    first: '首页',
                    last: '尾页'
                    , layout: ['count', 'prev', 'page', 'next', 'refresh', 'skip']
                    , theme: '#00A0E9'
                    , curr: curr
                    , skip: true
                    , jump: function (obj, first) {
                        curr = obj.curr;

                        if (!first) {
                            getData(obj.curr, obj.limit)
                        }
                    }
                });
                soulTable.render(this);

            }

        };
        table.render(t);

        function getData(page, limit) {
            $.ajax({
                type: 'post',
                url: 'list?page=' + page + "&limit=" + limit,
                async: false,
                success: function (data) {
                    $(".layui-laypage-btn").click();
                    table.reload('testReload', {
                        data: data,
                        page: {
                            curr: page
                        }
                    });

                }
            });
        }

        //添加
        $(".addResource_btn").click(function () {
            var url = "addUI";
            common.cmsLayOpen('添加资源', url, '700px', '500px');
        })
        //监听工具条
        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            if (obj.event === "del") {
                layer.confirm("你确定要删除该资源么？", {btn: ['是的,我确定', '我再想想']},
                    function () {
                        $.post("${base}/admin/system/rescource/delete", {"ids": [data.id]}, function (res) {
                            if (res.success) {
                                layer.msg("删除成功", {time: 1000}, function () {
                                    table.reload('test', t);
                                });
                            } else {
                                layer.msg(res.message);
                            }

                        });
                    }
                )
            }
            if (obj.event === "showPic") {
                layer.photos({
                    photos: '#pic_' + data.id,
                    anim: 5
                });
            }
            if(obj.event==="preview"){
                window.open('http://moshang.work:8012/onlinePreview?url='+encodeURIComponent(window.btoa(data.webUrl)));
            }

        });

        //功能按钮
        var active = {
            deleteSome: function () {                        //批量删除
                var checkStatus = table.checkStatus('test'),
                    data = checkStatus.data;
                if (data.length > 0) {
                    layer.confirm("你确定要删除这些资源么？", {btn: ['是的,我确定', '我再想想']},
                        function () {
                            var d = [];
                            for (var i = 0; i < data.length; i++) {
                                d.push(data[i].id);
                            }
                            $.post("${base}/admin/system/rescource/delete", {ids: d}, function (res) {
                                if (res.success) {
                                    layer.msg("删除成功", {time: 1000}, function () {
                                        table.reload('test', t);
                                    });
                                } else {
                                    layer.msg(res.message);
                                }
                            });
                        }
                    )
                } else {
                    layer.msg("请选择需要删除的资源", {time: 1000});
                }
            }
        };

        $('.layui-inline .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //搜索
        form.on("submit(searchForm)", function (data) {
            t.where = data.field;
            table.reload('testReload', t);
            return false;
        });

    });
</script>
</body>
</html>